<template>
  <div class="menu-list">
    <a-card>
      <div class="card-context">
        <div>
          <BarsOutlined /><span style="margin-left: 10px">数据列表</span>
        </div>
        <div>
          <a-button type="primary" @click="visibleModalAdd = true"
            >添加</a-button
          >
        </div>
      </div>
    </a-card>

    <a-table
      :columns="columns"
      :data-source="data"
      bordered
      ellipsis
      rowKey="menuId"
      style="margin-top: 10px"
    >
      <template #menuIcon="{ record }">
        <IconFont :type="record.menuIcon" />
      </template>
      <template #action="{ record }">
        <a-button @click="edit(record)">修改</a-button>
      </template>
    </a-table>

    <!-- 修改框 -->
    <a-modal v-model:visible="visibleModalEdit" title="修改" @ok="editSubmit">
      <a-form
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :rules="rules"
        :model="editFrom"
        ref="editFrom"
      >
        <a-form-item label="父菜单" name="menuPar">
          <a-select
            placeholder=" 请选择父菜单"
            v-model:value="editFrom.menuPar"
          >
            <a-select-option value="-1"> 没有父菜单 </a-select-option>
            <a-select-option
              :value="item.menuId"
              v-for="item in selectOption"
              :key="item.menuId"
            >
              {{ item.menuName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="菜单名称" name="menuName">
          <a-input
            placeholder="请输入菜单名称"
            v-model:value="editFrom.menuName"
          />
        </a-form-item>
        <a-form-item
          label="菜单路由"
          v-if="editFrom.menuPar !== '-1'"
          name="menuRouter"
        >
          <a-input
            placeholder="请输入菜单路由"
            v-model:value="editFrom.menuRouter"
          />
        </a-form-item>
        <a-form-item label="菜单图标" name="menuIcon">
          <a-input
            placeholder="请输入菜单图标"
            v-model:value="editFrom.menuIcon"
          />
        </a-form-item>
        <a-form-item label="菜单描述">
          <a-textarea
            placeholder="请输入菜单描述"
            :rows="4"
            v-model:value="editFrom.menuDes"
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 添加框 -->
    <a-modal v-model:visible="visibleModalAdd" title="添加" @ok="addSubmit">
      <a-form
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :rules="rules"
        :model="addFrom"
        ref="addForm"
      >
        <a-form-item label="父菜单" name="menuPar">
          <a-select placeholder=" 请选择父菜单" v-model:value="addFrom.menuPar">
            <a-select-option value="-1"> 没有父菜单 </a-select-option>
            <a-select-option
              :value="item.menuId"
              v-for="item in selectOption"
              :key="item.menuId"
            >
              {{ item.menuName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="菜单名称" name="menuName">
          <a-input
            placeholder="请输入菜单名称"
            v-model:value="addFrom.menuName"
          />
        </a-form-item>
        <a-form-item
          label="菜单路由"
          v-if="addFrom.menuPar !== '-1'"
          name="menuRouter"
        >
          <a-input
            placeholder="请输入菜单路由"
            v-model:value="addFrom.menuRouter"
          />
        </a-form-item>
        <a-form-item label="菜单图标" name="menuIcon">
          <a-input
            placeholder="请输入菜单图标"
            v-model:value="addFrom.menuIcon"
          />
        </a-form-item>
        <a-form-item label="菜单描述">
          <a-textarea
            placeholder="请输入菜单描述"
            :rows="4"
            v-model:value="addFrom.menuDes"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { message } from "ant-design-vue";
const columns = [
  {
    title: "菜单ID",
    dataIndex: "menuId",
    key: "menuId",
    align: "center",
  },
  {
    title: "名称",
    dataIndex: "menuName",
    key: "menuName",
    align: "center",
  },
  {
    title: "前端图标",
    dataIndex: "menuIcon",
    key: "menuIcon",
    align: "center",
    slots: { customRender: "menuIcon" },
  },
  {
    title: "菜单路由",
    dataIndex: "menuRouter",
    key: "menuRouter",
    align: "center",
  },
  {
    title: "描述",
    dataIndex: "menuDes",
    key: "menuDes",
    align: "center",
  },
  {
    title: "操作",
    key: "action",
    align: "center",
    slots: { customRender: "action" },
  },
];

const data = [];

import {
  BarsOutlined,
  SearchOutlined,
  createFromIconfontCN,
} from "@ant-design/icons-vue";

const IconFont = createFromIconfontCN({
  scriptUrl: "//at.alicdn.com/t/font_2349986_w0la5zy5hej.js",
  extraCommonProps: {
    style: {
      fontSize: "18px",
      fontWeight: "800",
    },
  },
});
export default {
  components: {
    createFromIconfontCN,
    BarsOutlined,
    SearchOutlined,
    IconFont,
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      data,
      columns,
      visibleModalEdit: false, //修改的框
      visibleModalAdd: false, //添加的框
      selectOption: [], //菜单选项

      //添加表单
      addFrom: {
        menuId: "",
        menuPar: undefined,
        menuName: "",
        menuType: "",
        menuDes: "",
        menuIcon: "",
        menuRouter: "",
      },
      //编辑表单
      editFrom: {
        menuId: "",
        menuPar: "",
        menuName: "",
        menuType: "",
        menuDes: "",
        menuIcon: "",
        menuRouter: "",
      },
      rules: {
        menuName: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
        ],
        menuRouter: [
          { required: true, message: "请输入菜单路由", trigger: "blur" },
        ],
        menuIcon: [
          { required: true, message: "请输入菜单图标", trigger: "blur" },
        ],
        menuPar: [
          {
            type: "string",
            required: true,
            message: "请选择父菜单",
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    edit(info) {
      this.visibleModalEdit = true;
      this.editFrom.children = info.children;

      if (null != this.editFrom.children) {
        this.editFrom.menuPar = "-1";
      } else {
        this.editFrom.menuPar = info.menuPar;
        this.editFrom.menuRouter = info.menuRouter;
      }
      this.editFrom.menuName = info.menuName;
      this.editFrom.menuDes = info.menuDes;
      this.editFrom.menuIcon = info.menuIcon;
      this.editFrom.menuId = info.menuId;
    },
    editSubmit() {
      this.$refs.editFrom
        .validate()
        .then(() => {
          this.visibleModalEdit = false;
          this.$axios
            .post("/admin/menu/edit", {
              menuPar:
                this.editFrom.menuPar == "-1" ? null : this.editFrom.menuPar,
              menuName: this.editFrom.menuName,
              menuDes: this.editFrom.menuDes,
              menuIcon: this.editFrom.menuIcon,
              menuRouter: this.editFrom.menuRouter,
              menuId: this.editFrom.menuId,
            })
            .then((res) => {
              if (res.data.code == 2000) {
                message.success("修改成功");
                this.getData();
                this.$refs.editFrom.resetFields();
              } else {
                message.error("修改失败");
              }
            });
        })
        .catch((error) => {
          console.log("error", error);
        });
    },
    addSubmit() {
      this.$refs.addForm
        .validate()
        .then(() => {
          this.visibleModalAdd = false;
          this.$axios
            .post("/admin/menu/add", {
              menuPar:
                this.addFrom.menuPar == "-1" ? null : this.addFrom.menuPar,
              menuName: this.addFrom.menuName,
              menuDes: this.addFrom.menuDes,
              menuIcon: this.addFrom.menuIcon,
              menuRouter: this.addFrom.menuRouter,
            })
            .then((res) => {
              if (res.data.code == 2000) {
                message.success("添加成功");
                this.getData();
                this.$refs.addForm.resetFields();
              } else {
                message.error("添加失败");
              }
            });
        })
        .catch((error) => {
          console.log("error", error);
        });
    },
    //获取数据
    getData() {
      this.$axios.get("/admin/menu/all").then((res) => {
        this.data = res.data.data;
      });
      this.$axios.get("/admin/menu/allFather").then((res) => {
        this.selectOption = res.data.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.menu-list {
  padding: 24px;
  background-color: #fff;
  margin: 24px 16px;
}
.card-context {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-context > div:nth-child(1) {
  font-size: 20px;
}
</style>